<template>
  <page-wrap
    :show-top="showTop"
    hide-tab
    :bg-color="uNavColor"
    back
    :title="pageTitle"
    :callBackUrl="gotoMyTabUrl"
  >
    <view class="user-center">
      <view
        class="person-top"
        :style="'padding-top:' + bgNavHeight + 'px;'"
      ></view>
      <view class="card-box" :style="'top:' + navHeight + 'rpx;'">
        <!-- cardType = 1 是添翼卡 cardType = 2 是职途卡 -->
        <view
          :class="{ card: true, changeBg: info.cardType == 1 }"
          v-if="info.personName"
        >
          <view class="card-header">
            <view class="card-header-left">
              <image
                :src="serviceText"
                :class="{ title: true, smallSize: info.cardType != 1 }"
              ></image>
            </view>
            <view class="card-header-right" v-if="info.expireTime">
              有效期至 {{ info.expireTime.slice(0, 10) }}
            </view>
          </view>
          <view class="card-info">
            <view class="left">
              <u-avatar
                :src="userInfo.pic || defaultAvatar"
                size="78"
                mode="circle"
              ></u-avatar>
              <u-icon
                size="40"
                name="edit-pen"
                :custom-style="{ 'margin-top': '12rpx' }"
                index="userInfo"
                @click="editUserInfo"
              ></u-icon>
            </view>
            <view class="middle">
              <text>姓名：{{ info.personName }}</text>
              <text v-if="info.stuNum">学号：{{ info.stuNum }}</text>
              <text v-if="info.cardNo">卡号：{{ info.cardNo }}</text>
              <text v-if="info.college">院校：{{ info.college }}</text>
            </view>
            <view class="right" @click="handleActivation">
              <text>我的权益</text>
            </view>
          </view>
        </view>
        <view v-else class="no-card">
          <view class="card-info">
            <view class="left"> 暂未验证身份信息 </view>
            <view class="right" @click="handleActivation">
              <text>立即激活</text>
            </view>
          </view>
        </view>
      </view>
      <view class="my-subscribe" @click="mySubscribeClick">
        <view class="list-item-left">
          <u-image
            class="notify-img"
            :src="notifyImg"
            width="32rpx"
            height="36rpx"
          ></u-image>
          <view class="notify-title">我的订阅</view>
        </view>
        <view v-if="unReadNotifyCount > 0" class="list-item-right">
          {{ unReadNotifyCount }}条新订阅
        </view>
        <view v-else class="list-item-rightArrow">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="titleImg">
        <image :src="titleImg"></image>
      </view>
      <view class="content" v-if="rightsList.length">
        <view
          :class="[
            'item',
            item.extra && item.extra.character ? 'heightBox' : 'shortBox',
            getBgFn(item, index)
          ]"
          v-for="(item, index) in rightsList"
          :key="index"
          @click="handleGoService(item)"
        >
          <view class="item-left">
            <view class="item-left-title">
              <view :class="['number', 'sort' + index]">{{ index + 1 }}</view>
              <view class="title">{{ item.rightName }}</view>
            </view>
            <view class="item-left-desc">{{ item.rightDesc }}</view>
            <view
              class="item-left-result"
              v-if="item.extra && item.extra.character"
              >{{ item.extra.character }}</view
            >
          </view>
          <view class="item-right">
            <image :src="rightArrow"></image>
            <view class="btn-name">{{ getStatusName(item) }}</view>
          </view>
        </view>
      </view>
    </view>
    <WelcomeDialog ref="welcomeDialog"></WelcomeDialog>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
    <u-modal
      v-model="showTip"
      :content="content"
      @confirm="handleConfirm"
    ></u-modal>
  </page-wrap>
</template>

<script>
import IMEventHandler from '@/utils/im';

import loginOutMixin from '@/mixins/login-out.js';
import loginMixin from '@/mixins/login.js';
import LoginDialog from '@/components/LoginDialog';
import WelcomeDialog from './components/WelcomeDialog';
import {
  getUserInfo,
  getUserRightsList,
  createZTReport,
  bindConsultant,
  ztBurryPoint,
  getNewNotify
} from '@/api/modules/career';
import { env } from '@/api/root';
import {
  getPersonDetail,
  isCompanyPersonOld,
  isCompanyPerson
} from '@/api/index';
export default {
  components: {
    LoginDialog,
    WelcomeDialog
  },
  mixins: [loginOutMixin, loginMixin],
  data() {
    return {
      pageTitle: '职途卡',
      uNavColor: '#ffbe61',
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      defaultAvatar: this.$imgBase + 'common/avatar_default.png',
      serviceText: this.$imgBase + 'careerPath/serviceTextNew.png',
      smallRightArrow: this.$imgBase + 'careerPath/smallRightArrow.png',
      titleImg: this.$imgBase + 'careerPath/titleImg.png',
      notifyImg: this.$imgBase + 'careerPath/careerNotify.png',
      rightArrow: this.$imgBase + 'careerPath/redRightArrow.png',
      bgNavHeight: getApp().globalData.navHeight + uni.upx2px(114) + 115,
      navHeight: getApp().globalData.navHeight + uni.upx2px(114),
      isLogin: false,
      userInfo: {},
      info: {},
      rightsList: [],
      showTop: false,
      gotoMyTabUrl: '/pages/userCenter/index',
      showWelcomeCount: 0,
      timer: null, // 定时器，用于生成职途报告时候多次点击造成重复生成报告的bug
      showTip: false,
      content: '当前用户已经绑定职途v2.0版本，是否跳转到v2.0版本的职途主页面？',
      unReadNotifyCount: 0,
      isFinishTest: false,
      assessmentVersion: uni.getStorageSync('assessmentVersion')
    };
  },
  onShow() {
    this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
    if (this.personId && !this.isLogin) {
      this.isLogin = true;
    } else {
      this.isLogin = false;
    }
    this.getUserInfoFn();
    this.getUserRightsListFn();
    this.getPersonDetail();
    this.getCareerNewNotify();
  },
  onHide() {
    // 解决在安卓机时候亮屏一次就弹多一个框的问题
    let port = uni.getSystemInfoSync().platform;
    if (port == 'android') {
      this.showTip = false;
    }
  },
  created() {
    if (!this.personId) return;
    this.isLogin = true;
    this.$bus.$on('updateBindStatus', () => {
      this.refreshInfo();
    });
  },
  beforeDestroy() {
    this.$bus.$off('updateBindStatus');
  },
  async mounted() {
    const res = await getUserInfo({ uid: '' });
    if (res.code == 200) {
      this.info = res.data;
    }
    // if (!this.info.personName) { // 暂时不打开欢迎页
    //   this.$refs.welcomeDialog.setVisibility(true);
    // }
  },
  onPageScroll(res) {
    this.showTop = res.scrollTop > 0;
  },
  methods: {
    reqZtBurryPoint(rightItem) {
      const params = {
        rightId: rightItem.rightId,
        cardType: this.info.cardType,
        personId: this.personId,
        description: `${this.personId}点击了${rightItem.rightName}`
      };
      ztBurryPoint(params)
        .then((res) => {
          if (res.code == 200) {
            console.log(`${this.personId}点击了${rightItem.rightName}`);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    editUserInfo() {
      uni.navigateTo({
        url: '/pagesSub/userCenter/careerPath/editUserInfo/index'
      });
    },
    async handleGoService(item) {
      if (!this.personId) {
        this.showLoginDialog();
      }
      if (!this.info.personName) {
        uni.showToast({ icon: 'none', title: '请先激活！' });
        return;
      }
      if (item.rightStatus == 0) {
        uni.showToast({
          icon: 'none',
          title: '该功能将根据训练营时间逐步开放，敬请期待！'
        });
        return;
      }
      this.reqZtBurryPoint(item);
      // DISC性格测试
      if (item.rightId == 1) {
        this.gotoDisc(item);
      }
      // 职业测评
      if (item.rightId == 2) {
        if (item.rightStatus == 1) {
          uni.navigateTo({
            url: `/pagesSub/career/activity/vocationalAssessment?fromWhere=careerPath&personId=${this.personId}`
          });
        } else {
          uni.navigateTo({
            url: `/pagesSub/careerAssessResultActNew/index?fromWhere=careerPath&personId=${this.personId}`
          });
          // if (!this.assessmentVersion || this.assessmentVersion == '1') {
          //   uni.navigateTo({
          //     url: `/pagesSub/career/activity/CareerAssessResultAct?fromWhere=careerPath&personId=${this.personId}`
          //   });
          // } else if (this.assessmentVersion == '2') {
          //   uni.navigateTo({
          //     url: `/pagesSub/careerAssessResultActNew/index?fromWhere=careerPath&personId=${this.personId}`
          //   });
          // }
        }
      }
      // 完善简历
      if (item.rightId == 3) {
        uni.navigateTo({
          url: '/pagesSub/newResume/index'
        });
      }
      //简历诊断
      if (item.rightId == 4) {
        //未使用
        if (item.rightStatus == 1) {
          uni.navigateTo({
            url: '/pagesSub/AIResumeDiagnoseNew/index'
          });
          //已使用
        } else if (item.rightStatus == 2) {
          uni.navigateTo({
            url: `/pagesSub/newResume/resumeAssessment/index?target=AIResumeDiagnoseNew`
          });
        }
      }
      // 竞争力分析
      if (item.rightId == 5) {
        if (item.rightStatus == 1) {
          //如果是贵州职途卡那就直接绑定一个特殊的ID
          if (this.info.cardType == 2) {
            this.handleDirectBindSomeone(item);
            return;
          }
          /*去咨询辅导里面看看extra是否有consultantId，有的话就直接跳到聊天，
          因为竞争力分析这个服务不一定有，但是咨询辅导一定是会有的，咨询辅导绑定了的话，
          竞争力分析就不需要绑定了*/
          const temp = this.rightsList.find((item) => item.rightId == 6);
          if (temp && temp.extra && temp.extra.consultantId) {
            this.toChat(temp);
          } else {
            // 如果咨询辅导都没有consultantId，就要去绑定
            uni.navigateTo({
              url: '/pagesSub/userCenter/careerPath/bindConsultantId/index'
            });
          }
        } else if (item.rightStatus == 2) {
          const temp = this.rightsList.find((item) => item.rightId == 6);
          if (temp && temp.extra && temp.extra.consultantId) {
            this.toChat(temp);
          }
        }
      }
      // 咨询辅导
      if (item.rightId == 6) {
        if (item.rightStatus == 1) {
          //如果是贵州职途卡那就直接绑定一个特殊的ID
          if (this.info.cardType == 2) {
            this.handleDirectBindSomeone(item);
            return;
          }
          uni.navigateTo({
            url: '/pagesSub/userCenter/careerPath/bindConsultantId/index'
          });
        } else if (item.rightStatus == 2) {
          this.reqZtBurryPoint(item);
          this.toChat(item);
        }
      }
      //职途报告
      if (item.rightId == 7) {
        if (item.rightStatus == 1) {
          const res = await getUserRightsList({ uid: '' });
          if (res.code == 200) {
            this.rightsList = res.data;
            const temp = this.rightsList.find((item) => item.rightId == 7);
            if (temp && temp.extra) {
              const url = item.extra.pdfUrl
                ? item.extra.pdfUrl
                : item.extra.wordUrl
                ? item.extra.wordUrl
                : '';
              uni.navigateTo({
                url: `/pagesSub/userCenter/careerPath/careerPathReport/index?careerReportSrc=${encodeURIComponent(
                  url
                )}&updateTime=${item.updateTime}&cardType=${this.info.cardType}`
              });
            } else {
              uni.showToast({
                icon: 'none',
                title: '职途报告生成中,请需要等待30秒左右喔~',
                duration: 3000
              });
              const params = {
                cardType: this.info.cardType
              };
              createZTReport(params).then((res) => {
                if (res.code == 201) {
                  uni.showToast({ icon: 'none', title: res.status_desc });
                }
              });
            }
          }
        }
        if (item.rightStatus == 2) {
          const url = item.extra.pdfUrl
            ? item.extra.pdfUrl
            : item.extra.wordUrl
            ? item.extra.wordUrl
            : '';
          uni.navigateTo({
            url: `/pagesSub/userCenter/careerPath/careerPathReport/index?careerReportSrc=${encodeURIComponent(
              url
            )}&updateTime=${item.updateTime}&cardType=${this.info.cardType}`
          });
        }
      }
      //职业大全
      if (item.rightId == 8) {
        uni.switchTab({
          url: '/pages/career/positionDictionary/allCategory'
        });
      }
    },
    handleDirectBindSomeone(item) {
      const params = {
        personId: parseInt(this.personId),
        consultantId: 23621939 //正式环境的秦超的职业顾问ID
        // consultantId: 19587644, //林老板给的测试环境职业顾问Id
        // consultantId: 19390429, //林老板给的正式环境职业顾问Id
      };
      bindConsultant(params).then((res) => {
        if (res.code == 200) {
          //因为没有重新获取userInfo所以直接写死一个进入的职业顾问Id
          item.extra = { consultantId: '23621939' };
          this.reqZtBurryPoint(item);
          this.toChat(item);
        } else {
          uni.showToast({ icon: 'none', title: res.status_desc });
        }
      });
    },
    toChat(item) {
      // 是否登录im
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        uni.showLoading({
          title: '正在连接',
          mask: true
        });
        setTimeout(() => {
          uni.hideLoading();
        }, 5000);
        let isFirst = true;
        try {
          new IMEventHandler(() => {
            if (isFirst) {
              isFirst = false;
              uni.hideLoading();
              uni.navigateTo({
                url: `/pagesSub/message/chat/index?chatId=${item.extra.consultantId}`
              });
            }
          });
        } catch (error) {
          this.getUserInfoFn();
          this.getUserRightsListFn();
          this.getPersonDetail();
          this.refreshInfo();
          uni.hideLoading();
        }
      } else {
        uni.navigateTo({
          url: `/pagesSub/message/chat/index?chatId=${item.extra.consultantId}`
        });
      }
    },
    gotoDisc(item) {
      if (item.rightStatus == 1) {
        const { personId, personName } = this.info;
        let url;
        if (env == 'test') {
          url = `https://3gtest.crm1001.com/disc/#/disc/question?person_id=${personId}&iname=${personName}&phone=18825449087&from=miniprogram`;
        } else if (env == 'pro' || env == 'pre') {
          url = `https://3g.crm1001.com/v2/disc/#/disc/question?person_id=${personId}&iname=${personName}&phone=18825449087&from=miniprogram`;
        }
        uni.reLaunch({
          url:
            '/pagesSub/public/web/descWebView?link=' + encodeURIComponent(url)
        });
      }
      if (
        (item.rightStatus == 2 || item.rightStatus == 3) &&
        item.extra &&
        item.extra.userId
      ) {
        const userId = item.extra.userId;
        const { personName } = this.info;
        let url;
        if (env == 'test') {
          url = `https://3gtest.crm1001.com/disc/#/disc/result?userId=${userId}&iname=${personName}&from=miniprogram`;
        } else if (env == 'pro' || env == 'pre') {
          url = `https://3g.crm1001.com/v2/disc/#/disc/result?userId=${userId}&iname=${personName}&from=miniprogram`;
        }
        uni.reLaunch({
          url:
            '/pagesSub/public/web/descWebView?link=' + encodeURIComponent(url)
        });
      }
      if (item.rightStatus == 3 && !item.extra) {
        uni.showToast({ icon: 'none', title: '该服务已经过期!' });
      }
    },
    getStatusName(item) {
      // 0未开放 1未使用 2已使用 3过期
      const { rightId, rightStatus } = item;
      // 统一显示
      if (rightStatus === 0) {
        return '敬请期待';
      }
      if (rightStatus === 3) {
        return '已过期';
      }
      // 个性化显示
      if (rightId == 1) {
        if (rightStatus == 2) {
          return '查看报告';
        } else if (rightStatus == 1) {
          return '立即使用';
        }
      }
      if (rightId == 2) {
        if (rightStatus == 2) {
          return '查看结果';
        } else if (rightStatus == 1) {
          return '立即测评';
        }
      }
      if (rightId == 3) {
        if (rightStatus == 2) {
          return '查看简历';
        } else if (rightStatus == 1) {
          return '立即完善';
        }
      }
      if (rightId == 4) {
        if (rightStatus == 2) {
          return '查看报告';
        } else if (rightStatus == 1) {
          return '立即使用';
        } else if (rightStatus == 0) {
          return '立即使用';
        }
      }
      if (rightId == 5) {
        if (rightStatus == 2) {
          return '立即分析';
        } else if (rightStatus == 1) {
          return '立即分析';
        }
      }
      if (rightId == 6) {
        if (rightStatus == 2) {
          return '立即咨询';
        } else if (rightStatus == 1) {
          return '立即咨询';
        }
      }
      if (rightId == 7) {
        if (rightStatus == 2) {
          return '立即查看';
        } else if (rightStatus == 1) {
          return '立即查看';
        }
      }
      if (rightId == 8) {
        if (rightStatus == 2) {
          return '点击进入';
        } else if (rightStatus == 1) {
          return '点击进入';
        }
      }
    },
    getBgFn(item, index) {
      if (index + 1 === 1) {
        if (item.extra && item.extra.character) {
          return 'longTopBox';
        } else {
          return 'topBox';
        }
      } else {
        if (item.extra && item.extra.character) {
          return 'longLineBox';
        } else {
          return 'shortLineBox';
        }
      }
    },
    getUserInfoFn() {
      // 这个uid一定要传，因为在interceptors中，没有传参的请求的请求头不会带上uid，而这个请求一定要uid
      getUserInfo({ uid: '' }).then((res) => {
        if (res.code == 200) {
          const cardVersion = res.data.cardVersion;
          if (cardVersion == 2) {
            this.showTip = true;
          } else {
            this.info = res.data;
            if (res.data.cardType == 1) {
              this.pageTitle = '添翼就业服务卡';
            } else {
              this.serviceText =
                this.$imgBase + 'careerPath/serviceTextNew_zhitu.png';
              this.pageTitle = '职途卡';
            }
          }
        }
      });
    },
    handleConfirm() {
      uni.navigateTo({
        url: '/pagesSub/userCenter/careerPathV2/index'
      });
      this.showTip = false;
    },
    getUserRightsListFn() {
      // 这个uid一定要传，因为在interceptors中，没有传参的请求的请求头不会带上uid，而这个请求一定要uid
      getUserRightsList({ uid: '' }).then((res) => {
        if (res.code == 200) {
          this.rightsList = res.data;
          this.rightsList.forEach((element) => {
            if (element.rightId == 2 && element.rightStatus == 2) {
              //已完成职业测评
              this.isFinishTest = true;
            }
          });
        }
        uni.hideLoading();
      });
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    handleActivation() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      if (this.info && this.info.cardNo && !this.info.personName) {
        uni.navigateTo({
          url: '/pagesSub/userCenter/careerPath/activateCareerPathCard/stepTwo'
        });
        return;
      }
      if (this.info && this.info.personName && this.info.cardNo) {
        uni.navigateTo({
          url: '/pagesSub/userCenter/careerPath/myRights/index'
        });
      } else {
        uni.navigateTo({
          url: '/pagesSub/userCenter/careerPath/activateCareerPathCard/index'
        });
      }
    },
    loginSuccessBack() {
      this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
      if (this.personId && !this.isLogin) {
        this.refreshInfo();
        this.isLogin = true;
        getApp().watch((val) => {
          this.kingKongList[0].cnt = val;
        }, 'meCount');
        this.$bus.$on('updatePersonDetail', this.getPersonDetail);
      }
    },
    refreshInfo() {
      let tabBarList =
        getApp().globalData.loginStatus === 'company'
          ? getApp().globalData.companyTabs
          : getApp().globalData.personTabs;
      getApp().globalData.tabBarList = tabBarList;
      this.getUserInfoFn();
      this.getUserRightsListFn();
      this.getPersonDetail(true);
      this.getCompanyPersonInfo();
    },
    getPersonDetail(update) {
      if (
        !getApp().globalData.userInfo ||
        !getApp().globalData.userInfo.id ||
        update
      ) {
        let param = {
          param: JSON.stringify({
            personId: this.personId
          }),
          where: '',
          slaveInfo: 1
        };
        getPersonDetail(param).then((res) => {
          this.userInfo = res.data || res;
          if (
            this.userInfo.pic &&
            this.userInfo.pic.indexOf('img.job1001.com/myUpload/pic.gif') >= 0
          ) {
            this.userInfo.pic = this.$defalutAvatar;
          }
          getApp().globalData.userInfo = this.userInfo;
        });
      } else {
        this.userInfo = getApp().globalData.userInfo;
      }
    },
    getCompanyPersonInfo() {
      let params = {
        person_id: this.personId
      };
      isCompanyPerson(params).then((res) => {
        if (res && res.code == 200) {
          uni.setStorageSync('company-id', res.info.company_id);
          this.setOptionList();
        } else {
          params = {
            personId: this.personId
          };
          isCompanyPersonOld(params).then((oldRes) => {
            if (oldRes && oldRes.code == 200) {
              uni.setStorageSync('company-id', oldRes.company_id);
              this.setOptionList();
            } else {
              uni.removeStorageSync('company-id');
            }
          });
        }
      });
    },
    getCareerNewNotify() {
      let params = {
        personId: this.personId
      };
      getNewNotify(params).then((res) => {
        if (res && res.code == 200) {
          console.log('--getNewNotify----刷新红点------>', res);
          this.unReadNotifyCount = parseInt(res.data);
        }
      });
    },
    //点击我的订阅
    mySubscribeClick() {
      if (this.isFinishTest) {
        uni.navigateTo({
          url: '/pagesSub/userCenter/careerPath/mySubscribe/index'
        });
      } else {
        uni.showToast({
          icon: 'none',
          title: '未完成职业测评,请先完成职业测评！',
          duration: 1000
        });
      }
    }
  }
};
</script>

<style lang="scss">
$img-base-person: $img-base + 'careerPath/';
@include img-base-self('.person-top', 'careerPath/upPart.png?v=1');

@font-face {
  font-family: 'D-DIN-PRO-700-Bold'; /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf');
}

.user-center {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.person-top {
  height: 280rpx;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}
.card-box {
  margin: -300rpx 32rpx 32rpx 32rpx;
  display: flex;
  justify-content: center;
  z-index: 999;
  .card {
    width: 688rpx;
    padding-bottom: 18rpx;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url($img-base + 'careerPath/cardBgNoSchool.png');
    border-radius: 20rpx;
    border: 1rpx solid #fff;
    overflow: hidden;
    &-header {
      width: 100%;
      height: 50rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #0bca5d;
      &-left {
        height: 100%;
        padding-left: 24rpx;
        display: flex;
        align-items: center;
        .title {
          height: 26rpx;
          width: 163rpx;
          &.smallSize {
            width: 120rpx;
          }
        }
      }
      &-right {
        height: 100%;
        line-height: 50rpx;
        font-size: 24rpx;
        padding: 0 20rpx 0 20rpx;
        color: #2ba03a;
        background: #fff;
      }
    }
    &-info {
      width: 100%;
      height: calc(100% - 48rpx);
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 23rpx 12rpx 0 24rpx;
      .left {
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .middle {
        display: flex;
        flex-direction: column;
        margin-left: 12rpx;
        text {
          color: #fff;
          font-size: 28rpx;
          padding: 8rpx 0;
        }
      }
      .right {
        flex-shrink: 0;
        // width: 150rpx;
        color: #fff;
        background: #2a5cff;
        opacity: 0.94;
        padding: 10rpx 25rpx;
        border-radius: 30rpx;
        text-align: center;
      }
    }
  }
  .changeBg {
    background-image: url($img-base + 'careerPath/cardBg.png');
  }
  .no-card {
    background: rgba(#222, 0.6);
    border-radius: 12rpx;
    width: 688rpx;
    height: 120rpx;
    display: flex;
    color: #fff;
    padding: 32rpx;
    justify-content: space-between;
    align-items: center;
    .right {
      flex-shrink: 0;
      width: 150rpx;
      color: #fff;
      background: rgba(36, 79, 203, 0.9);
      padding: 8rpx 0;
      border-radius: 14rpx;
      text-align: center;
      margin-left: auto;
    }
  }
}
.my-subscribe {
  display: flex;
  justify-content: space-between;
  margin: 0rpx 32rpx;
  padding: 14rpx 10rpx;
  background-color: #fff;
  border-radius: 8rpx !important;
  border: 2rpx solid #fff;
  box-shadow: 2px 2px 4px rgba(89, 123, 80, 0.3);
  .list-item-left {
    display: flex;
    align-self: center;
    margin: 0rpx 10rpx;
    .notify-title {
      margin: auto 20rpx;
      color: #222;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 32rpx;
    }
  }
  .list-item-right {
    position: relative;
    margin: 0rpx 16rpx;
    padding: 12rpx 20rpx 12rpx 40rpx;
    border-radius: 28rpx !important;
    background-color: #ededed;
    color: #222;
    font-size: 26rpx;
  }
  .list-item-right::before {
    content: '';
    position: absolute;
    top: 25rpx;
    left: 20rpx;
    width: 10rpx;
    height: 10rpx;
    background-color: red;
    border-radius: 50%;
  }
  .list-item-rightArrow {
    margin: 0rpx 16rpx;
  }
}
.titleImg {
  margin-left: 76rpx;
  margin-bottom: -27rpx;
  position: relative;
  image {
    width: 100%;
    height: 610rpx;
  }
}
.content {
  width: 100vw;
  padding-left: 32rpx;
  padding-bottom: 105rpx;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url($img-base + 'careerPath/downPart.png?v=1');
  .item {
    width: 100%;
    display: flex;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 0 32rpx 0 23rpx;
    &-left {
      width: 500rpx;
      &-title {
        display: flex;
        align-items: center;
        color: #000;
        padding-bottom: 8rpx;
        .number {
          font-size: 58rpx;
          position: relative;
          font-weight: bolder;
          width: 82rpx;
          height: 49rpx;
          line-height: 35rpx;
          margin-right: 19rpx;
          text-align: center;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
        }
        .title {
          font-size: 48rpx;
          font-weight: 600;
          padding-bottom: 12rpx;
        }
      }
      &-desc {
        font-size: 26rpx;
        color: #000;
      }
      &-result {
        font-size: 26rpx;
        color: #cd3b45;
        padding: 12rpx 0;
      }
    }
    &-right {
      width: 208rpx;
      flex-shrink: 0;
      padding-top: 12rpx;
      image {
        width: 54rpx;
        height: 54rpx;
        margin: 0 auto;
      }
      .btn-name {
        font-size: 28rpx;
        color: 000;
        text-align: center;
        padding-top: 10rpx;
      }
    }
  }
  .heightBox {
    height: 286rpx;
    padding: 60rpx 0 0 42rpx;
    .item-right {
      padding-top: 30rpx;
    }
  }
  .shortBox {
    height: 270rpx;
    padding: 100rpx 0 0 42rpx;
  }
  .topBox {
    background-image: url($img-base + 'careerPath/box.png?v=1');
    padding: 68rpx 0 0 42rpx;
    height: 241rpx;
  }
  .shortLineBox {
    background-image: url($img-base + 'careerPath/shortLineBox.png?v=1');
    background-size: 100% 100%;
  }
  .longLineBox {
    background-image: url($img-base + 'careerPath/longLineBox.png?v=1');
    background-size: 100% 100%;
    padding-top: 80rpx;
  }
  .longTopBox {
    background-image: url($img-base + 'careerPath/longBox.png?v=1');
  }
  .sort0 {
    background-image: url($img-base + 'careerPath/1.png?v=1');
  }
  .sort1 {
    background-image: url($img-base + 'careerPath/2.png?v=1');
  }
  .sort2 {
    background-image: url($img-base + 'careerPath/3.png?v=1');
  }
  .sort3 {
    background-image: url($img-base + 'careerPath/4.png?v=1');
  }
  .sort4 {
    background-image: url($img-base + 'careerPath/5.png?v=1');
    height: 290rpx;
  }
  .sort5 {
    background-image: url($img-base + 'careerPath/6.png?v=1');
  }
  .sort6 {
    background-image: url($img-base + 'careerPath/7.png?v=1');
  }
  .sort7 {
    background-image: url($img-base + 'careerPath/1.png?v=1');
  }
}
</style>
